<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Demo: Layout with Dijit</title>
        <link rel="stylesheet" href="./css/style.css" media="screen"></link>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/claro/claro.css" media="screen"></link>
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/dojo.js"        ></script>
        <script type='text/javascript' src='./js/jquery/js/jquery-1.7.1.min.js'         ></script>
        <script type='text/javascript' src='./js/jquery/js/jquery.mousewheel.min.js'    ></script>
        <script type='text/javascript' src='./js/API/TToolTip.js'                       ></script>
        <script type='text/javascript' src='./js/API/TPlanEngine.js'                    ></script>
        <script type='text/javascript' src='./js/TMap/TMap.js'                          ></script>
        <script>
            var map;
            var tpe;
        </script>
        <style type="text/css">
            #search_button{
                font-family:                Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; 
                display:                    inline;
                outline-color:              #222;
                outline-style:              none;
                outline-width:              0px;
                position:                   static;
                padding:                    1%;
                color:                      white;
                border-top-color:           #64D0E7;
                border-radius:              20%/30%;
                border-top-style:           solid;
                border-top-width:           1px;
                font-weight:                bold;
                text-shadow:                rgba(0, 0, 0, 0.496094) 0px -1px 0px;
                background-image: -webkit-linear-gradient(top, #00B0D8, #0088C4);
                background-image: -moz-linear-gradient(top, #00B0D8, #0088C4);
                background-image: -o-linear-gradient(top, #00B0D8, #0088C4);
                background-image: -ms-linear-gradient(top, #00B0D8, #0088C4);
                background-image: linear-gradient(top, #00B0D8, #0088C4);
                margin-top:                 5%;
                margin-bottom:              5%;
            }
        </style>
    </head>
    <body class="claro">
        <div id="appLayout" class="demoLayout" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design: 'headline'">
            <div id="centralPanel" class="centerPanel" data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region: 'center', tabPosition: 'bottom'" style="overflow: hidden !important;">
                <div id="city_tab" data-dojo-type="dijit/layout/ContentPane" title="карта города">
                    <div id="city_map"      style="width: 100%; height: 100%; "></div>    
                </div>
                <div id="building_tab" data-dojo-type="dijit/layout/ContentPane" title="план здания" style="overflow: hidden !important;">
                    <div id="building_plan" style="width: 100%; height: 100%; overflow: hidden !important;"></div>
                </div>
            </div>
            <div class="edgePanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'top'">
                <div style="width: 21% !important; display: block-inline;  float: left; text-align: center; padding: 1%;">Tap'n'map</div>
                <div style="width: 70% !important; display: block-inline; float: left; text-align: center; padding: 1%;">
                    <input id="search_box" style="width: 50%" placeholder="начните печатать название искомого здания здесь" data-dojo-type="dijit/form/TextBox"></input>
                    <div id="search_button">Найти</div>
                </div>
            </div>
            <div id="leftCol" class="edgePanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'left', splitter: true" style="width: 20%;">
                Sidebar content (left)
            </div>
        </div>
    </body>
    <script type="text/javascript">
            require(["dojo/parser", "dojo/ready", "dojo/on", "dijit/form/TextBox", "dijit/layout/TabContainer", "dijit/layout/ContentPane", "dijit/layout/BorderContainer"], function(parser, ready, on, textbox){
                    parser.parse();
                    map = MapEngines.Google().initMap("city_map", MapTypes.ROADMAP, new Coords(30, 40), 7);
                    tpe = new TPlanEngine({parentElementId: 'building_plan', predefinedParentWidth: document.getElementById('city_tab').clientWidth, predefinedParentHeight: document.getElementById('city_tab').clientHeight});
                    tpe.setUpPlanFromText('<svg version = "1.1" baseProfile="full" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" xmlns:ev = "http://www.w3.org/2001/xml-events" id="plan" style="width: 400px; height: 400px;"><defs id="floors"><g id="fl1" floor_number="1"><rect x="0" y="0" width="400px" height="400px" fill="none" stroke="black" stroke-width="5px" stroke-opacity="0.5" id="base"/><g fill-opacity="0.6" stroke="black" stroke-width="0.5px" ><circle id="red_circle" cx="200px" cy="200px" r="104px" fill="red" transform="translate(0,-52)" onclick=\'tpe.showToolTip("red_circle");\' name="RED" description="red circle"><name>RED</name><description>red circle</description></circle><circle cx="200px" cy="200px" r="104px" fill="blue"  transform="translate( 60, 52)" /><circle cx="200px" cy="200px" r="104px" fill="green" transform="translate(-60, 52)" /></g></g><g id="fl2" floor_number="2"><rect x="0" y="0" width="400px" height="400px" fill="none" stroke="black" stroke-width="5px" stroke-opacity="0.5" id="base1"/><g fill-opacity="0.6" stroke="black" stroke-width="0.5px" ><circle cx="200px" cy="200px" r="104px" fill="black"   transform="translate(  0,-52)" /><circle cx="200px" cy="200px" r="104px" fill="yellow"  transform="translate( 60, 52)" /><circle cx="200px" cy="200px" r="104px" fill="orange" transform="translate(-60, 52)" /></g></g></defs><use id="use" xlink:href="#fl1"/></svg>');

            });
        </script>
</html>